<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/in.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
<%--     <script src="${staticPage}/js/slider.js"></script> --%>
    <link rel="stylesheet" href="${staticPage}/css/weui.css"/>
    <link rel="stylesheet" href="${staticPage}/css/register.css"/>
<%--   <link href="${staticPage}/css/base.css" rel="stylesheet">  --%>
    <link href="${staticPage}/css/slider.css" rel="stylesheet">

   
</head>
<script type="text/javascript">
	
	function showToast(){
		 $('#toast').show();
	    setTimeout(function () {
	        $('#toast').hide();
	    }, 1300);
	}

	$(function(){
		
		var oBtn = document.getElementById('btn');
	    var oW,oLeft;
	    var oSlider=document.getElementById('slider');
	    var oTrack=document.getElementById('track');
	    var oIcon=document.getElementById('icon');
	   /*  var oSpinner=document.getElementById('spinner'); */
	    var oBtnR=document.getElementById('button_right');

	    function register(){
	    	/* var oBtn = document.getElementById('btn');
		    var oW,oLeft;
		    var oSlider=document.getElementById('slider');
		    var oTrack=document.getElementById('track');
		    var oIcon=document.getElementById('icon'); */
		    /* var oSpinner=document.getElementById('spinner'); */
			/* var realname=$("#wxUserForm input[name='realname']").val();
			var tel=$("#wxUserForm input[name='tel']").val();
			var birth=$("#wxUserForm input[name='birth']").val();
			var dot=$("#wxUserForm select[name='dot']").val();
			/* var code=$("#wxUserForm input[name='code']").val(); */
			var dot=$("#wxUserForm select[name='dot']").val();
//	 		alert(dot);
				if(dot==""||dot==null){
					alert("网点不能为空！");
					 oBtn.style.left = 0;
			         oTrack.style.width= 0;
			         
				}
				else{
					var ajax_url = "${ctx}/user_addTest.json";
	    			var ajax_data = $("#wxUserForm").serialize();
	    			$.post(ajax_url, ajax_data, function(data) {
	    				
	    				if (data.success) {
	    					oBtn.style.left = (document.documentElement.clientWidth - oBtn.offsetWidth-80);
	    		            oTrack.style.width= (document.documentElement.clientWidth - oBtn.offsetWidth-80);
	    		            oIcon.style.display='none';
	    		            /* oSpinner.style.display='block'; */
	    		            document.getElementById("wordFirst").innerHTML="";
	    		            document.getElementById('successTest').innerHTML="&nbsp;&nbsp;&nbsp;注册成功！";
	    		            document.getElementById('successTest').style.color='#ffffff';
	    		            
	    		            setTimeout(function () {
	   		            	 location.href="${ctx}/myVip.do";
	        				}, 1600); 
	     		            oBtn.removeEventListener("touchmove",move,false);//阻止页面的滑动默认事件 
	     		           
	    		            
//	     					showToast();
	    				    //window.location.reload();
	    				   
	    				    
	    					// $.getJSON("${ctx}/user_weixinlogin.json");
	    				} else{
	    					alert(data.msg);
			   				 oBtn.style.left = 0;
			   		         oTrack.style.width= 0;
	    				}
	    					
	    			}, "json");
	    			return false;
				}
	    }


	    oBtn.addEventListener('touchstart',function(e){

	        var touches = e.touches[0];

	        oW = touches.clientX - oBtn.offsetLeft;    //触摸目标的X坐标
	        oBtn.className="button";
	        oTrack.className="track";
	        // document.addEventListener("touchmove",defaultEvent,false);//阻止页面的滑动默认事件
	        e.preventDefault();
	    },false);

	    oBtn.addEventListener("touchmove",move,false);


	    oBtn.addEventListener("touchend",function() {
	        if(oLeft>=(oSlider.clientWidth-oBtn.clientWidth)){
	        	 register();
	        	// e.preventDefault();
	        	
// 	            oBtn.style.left = (document.documentElement.clientWidth - oBtn.offsetWidth-80);
// 	            oTrack.style.width= (document.documentElement.clientWidth - oBtn.offsetWidth-80);
// 	             oBtnR.style.display='none';
	            // oSpinner.style.display='block';
	            // oSpinner.setAttribute("class","icon-ok icon-3x");
	           /*  document.getElementById("wordFirst").innerHTML="";
	            document.getElementById('successTest').innerHTML="&nbsp;&nbsp;&nbsp;验证成功！";
	            document.getElementById('successTest').style.color='#ffffff'; */
	            // document.removeEventListener("touchmove",move,false);//阻止页面的滑动默认事件

// 	            oBtn.removeEventListener("touchmove",move,false);//阻止页面的滑动默认事件


	        }else{
	            oBtn.style.left = 0;
	            oTrack.style.width= 0;
	        }

	        oTrack.className="track-on";
	        oBtn.className="button-on";

	    },false);

	    function defaultEvent(e) {
	        e.preventDefault();
	    }
	    function  move(e){
	    	 e.preventDefault();
	        var touches = e.touches[0];
	        oLeft = touches.clientX - oW;    //滑块滑动的真实距离

	        if(oLeft < 0) {
	            oLeft = 0;
	        }else if(oLeft-1 > document.documentElement.clientWidth - oBtn.offsetWidth-80) {  //大于滑动验证块的距离
	            oLeft = (document.documentElement.clientWidth - oBtn.offsetWidth-80);
	        }


	        oBtn.style.left = oLeft + "px";
	        oTrack.style.width=oLeft+ 'px';
	    }

	})
	
	
</script>

<body>

       <div id="logo">
        <img src="image/logo.png" style="width: 100%;height: 75%;padding: 0px;margin: 0px">
        <h4 style="font-family: SimSun;text-align: center;margin-top: -10px">金牛支行</h4>
    </div>

    <form id="wxUserForm"  style="font-size:17px">
        <!--<hr width=80% size=0.5 color=#ffffff align=center noshade style="margin: auto">-->
        <div class="weui_cell weui_cell_select weui_select_after"  style="color: #ffffff">
            <div class="weui_cell_hd" style="margin-left: 0px">
                <label  class="weui_label" style="margin-left: 30px">网点</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary" >
                <select class="weui_select" name="dot" style="color: #dfdfdf">
                    <option value="" selected disabled >请选择网点</option>
                    <option value="401">金牛支行营业室（沙湾路）</option>
                    <option value="402">成都花园支行（青羊大道）</option>
                    <option value="403">荷花池支行（金牛万达旁） </option>
                    <option value="404">外西支行（花牌坊北街） </option>
                    <option value="405">天回支行（天回镇上街）</option>
                    <option value="406">高笋塘支行（二环路北三段）</option>
                    <option value="407">西郊支行（十二桥路）</option>
                    <option value="408">洞子口支行（洞子口）</option>
                    <option value="409">蜀鑫支行（蜀鑫路）</option>
                    <option value="410">蜀西支行（蜀西路）</option>
                    <option value="411">五福支行（蓉北商贸大道）</option>
                    <option value="412">茶店子支行（茶店子东街）</option>
                    <option value="413">国际商贸城支行（国际商贸城）</option>
                    <option value="414">光华逸家分理处（万家湾光华逸家小区）</option>
                    <option value="415">大湾分理处（军区总医院内）</option>
                    <option value="416">蜀汉路支行（蜀蓉路）</option>
                    <option value="417">星辰支行（九里堤星辰路）</option>

                </select>
            </div>
        </div>
        <!--<hr width=80% size=0.5 color=#ffffff align=center noshade style="margin: auto">-->
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label"  style="margin-left: 30px">手机号</label></div>
            <div class="weui_cell_bd weui_cell_primary" style="color: #dfdfdf">
                <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入手机号" name="tel"/>
            </div>
        </div>
        <!--<hr width=80% size=0.5 color=#ffffff align=center noshade style="margin: auto">-->
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label"  style="margin-left: 30px">姓名</label></div>
            <div class="weui_cell_bd weui_cell_primary" style="color: #dfdfdf">
                <input class="weui_input" type="text"  placeholder="请输入姓名（选填）" name="realname"/>
            </div>
        </div>
        <!--<hr width=80% size=0.5 color=#ffffff align=center noshade style="margin: auto">-->
    </form>

    <!--<div id="slide">-->
        <!--<img src="image/slide.png" style="height: 60px">-->
    <!--</div>-->
    <div class="stage">
        <div class="slider" id="slider">
            <div class="labelSlide" id="wordFirst">向右滑动注册>></div>
            <div class="track" id="track">
                <div class="bg-green" id="successTest"></div>
            </div>
            <div class="button" id="btn" >
                <div class="icon" id="icon" ></div>
                <!--<div class="spinner" id="spinner">-->

            </div>

            <div id="button_right"></div>
        </div>



    </div>
					
</body>

</html>